<template>
  <div class="main">
    <!-- 遮罩层 -->
    <div
      class="box1"
      v-if="maskedIsshow"
    >

      <div class="container">
        <!-- 主要内容 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          class="masked"
        >
          <div
            class="turnoff el-icon-close"
            @click="maskedIsshow=false"
          ></div>
          <div class="form-wrapper">
            <!-- 表单头部tab -->
            <el-row
              type="flex"
              justify="center"
              class="tabs"
            >
              <span
                :class="{ active: currentTab === index }"
                v-for="(item, index) in [`登录`, `注册`]"
                :key="index"
                @click="handleChangeTab(index)"
              >
                {{ item }}
              </span>
            </el-row>

            <!-- 登录功能组件 -->
            <LoginForm
              v-if="currentTab == 0"
              @postLogin='maskedIsshow=false'
            />

            <!-- 注册功能组件 -->
            <RegisterForm
              v-if="currentTab == 1"
              @successReg='currentTab=0'
            />
          </div>
        </el-row>
      </div>
    </div>

    <!-- 左边 -->
    <div class="left">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
        <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 标题 -->
      <h1>{{articles.title}}</h1>
      <!-- 文章信息 -->
      <div class="info">攻略：{{articles.city&&articles.city.created_at}} 阅读：{{articles.watch}}</div>
      <!-- 文章详情 -->
      <div
        class="content"
        v-html="articles.content"
      ></div>

      <!-- 评论与分享功能键 -->
      <div class="function">
        <div class="fn_comment">
          <div
            class="comment"
            @click="fnComment"
          >
            <div class="icom el-icon-edit"></div>
            <p>评论({{articles.comments&&articles.comments.length}})</p>
          </div>
          <div
            class="share"
            @click="share"
          >
            <div class="icom el-icon-paperclip"></div>
            <p>分享</p>
          </div>
        </div>
      </div>

      <!-- 评论模块 -->
      <div class="comment">
        <!-- 标题 -->
        <h4>评论</h4>
        <span
          class="reply"
          v-if="isShow"
        >回复&nbsp;{{nickname}}
          <div
            class="el-tag__close el-icon-close"
            @click="close"
          ></div>
        </span>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
          ref="input"
          resize="none"
        >
        </el-input>
        <!-- 评论区域的功能模块 -->
        <div class="comment_function">
          <!-- 上传功能 -->
          <div class="upload">
            <el-upload
              :action="baseURL+'/upload'"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              name='files'
              :on-success='onSuccess'
              ref="imgupload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
              >
            </el-dialog>
          </div>
          <!-- 发表评论功能 -->
          <div class="publish">
            <el-button
              type="primary"
              size="small"
              @click="submit(articles.id)"
            >提交</el-button>
          </div>
        </div>

        <!-- 展示评论模块 -->
        <div class="commentBlock">
          <commentBlock
            v-for="(item,index) in commentList"
            :key=index
            :data='item'
            @replydata='replydata'
          ></commentBlock>
        </div>
      </div>

      <!-- 评论分页 -->
      <el-pagination
        class="paging"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 右边 -->
    <div class="right">
      <!-- 相关攻略 -->
      <h4>相关攻略</h4>
      <!-- 推荐模块 -->
      <recommendItem
        v-for="(item,index) in correlation"
        :key="index"
        :data='item'
      ></recommendItem>
    </div>
  </div>
</template>

<script>
import LoginForm from "@/components/user/LoginForm";
import RegisterForm from "@/components/user/RegisterForm";
import commentBlock from "@/components/post/commentBlock";
import axios from "@/utils/myaxios";
import recommendItem from "@/components/post/recommendItem";
import { articles, recPost, sendPostComment, postComment } from "@/api/post";
import { login } from "~/api/user";
export default {
  data() {
    return {
      baseURL: axios.defaults.baseURL,
      articles: {},
      textarea: "",
      dialogImageUrl: "", //上传图片的路径，用于显示图片
      dialogVisible: false,
      correlation: [],
      picUrl: [],
      pageIndex: 1,
      pageSize: 5,
      commentList: [],
      isShow: false,
      nickname: null,
      userid: "",
      total: 0,
      loading: null,
      currentTab: 0,
      maskedIsshow: false,
    };
  },
  components: {
    recommendItem,
    commentBlock,
    LoginForm,
    RegisterForm,
  },
  methods: {
    // 缺少登录时的遮罩
    handleChangeTab(index) {
      this.currentTab = index;
    },
    // 加载时的遮罩
    maskLayer() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },

    // 评论的分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.comment();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.comment();
    },
    // 评论按钮
    fnComment() {
      this.$refs.input.focus();
    },
    // 分享按钮
    share() {
      console.log(111);
      this.$message.warning("暂不支持分享");
    },
    // 发表评论封装的函数
    async commentFu() {
      const id = this.$route.query.id;
      const token = this.$store.state.user.userInfo.token;
      if (!token) {
        this.$message.warning("未登录，请先登录");
        // this.$router.push({ path: "/user/login" });
        this.maskedIsshow = true;
        return;
      }
      if (this.textarea.trim() == "") {
        this.$message.warning("评论内容不能为空！");
        return;
      }
      const data = {
        post: id,
        content: this.textarea,
        pics: this.picUrl,
        follow: this.userid,
      };
      let res = await sendPostComment(data, token);
      if (res) {
        this.$message.success("提交成功");
        this.textarea = "";
        this.comment();
        this.$refs.imgupload.clearFiles();
        this.close();
      }
    },
    // 关闭回复用户评论
    close() {
      this.nickname = null;
      this.isShow = false;
      this.userid = "";
    },
    // 对评论进行评论
    replydata(id, nickname) {
      this.userid = id;
      this.isShow = true;
      this.nickname = nickname;
      this.$refs.input.focus();
    },
    // 对文章发表评论
    async submit() {
      this.commentFu();
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传成功后的钩子
    onSuccess(response, file, fileList) {
      // 可用多张图片一起上传
      // this.picUrl.push(
      //   ...response.map((v) => {
      //     return v;
      //   })
      // );
      // 单张图片进行上传
      this.picUrl.push(response[0]);
    },
    // 封装的获取数据
    async init() {
      // 文章详情
      const id = this.$route.query.id;
      let res = await articles(id);
      if (res.data) {
        this.articles = res.data.data[0];
      }
      // 推荐文章
      let res2 = await recPost(id);
      if (res2.data) {
        this.correlation = res2.data.data;
      }
    },
    // 获取文章的评论
    async comment() {
      const id = this.$route.query.id;
      const params = {
        post: id,
        _limit: this.pageSize,
        _start: (this.pageIndex - 1) * this.pageSize,
      };
      const res = await postComment(params);
      if (res) {
        this.commentList = res.data.data;
        this.total = res.data.total;
      }
      this.loading.close();
    },
  },
  async created() {
    this.maskLayer();
    this.init();
    this.comment();
  },
};
</script>

<style lang="less" scoped>
.box1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  .masked {
    position: relative;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    margin-top: 250px;

    .turnoff {
      position: absolute;
      top: -55px;
      right: 250px;
      width: 30px;
      height: 30px;
      border-radius: 25px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 30px;
      color: white;
      font-size: 25px;

      &:hover {
        border-color: orange;
        color: orange;
        cursor: pointer;
      }
    }

    .form-wrapper {
      width: 400px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .tabs {
        span {
          display: block;
          width: 50%;
          height: 50px;
          box-sizing: border-box;
          border-top: 2px #eee solid;
          background: #eee;
          line-height: 48px;
          text-align: center;
          cursor: pointer;
          color: #666;

          &.active {
            color: orange;
            border-top-color: orange;
            background: #fff;
            font-weight: bold;
          }
        }
      }
    }
  }
}
.main {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 20px auto 0;

  // 左边
  .left {
    width: 700px;

    h1 {
      padding: 20px 0;
      font-size: 32px;
      font-weight: 700;
      border-bottom: 1px solid #ccc;
    }

    .info {
      height: 21px;
      padding: 20px;
      text-align: right;
      color: #999999;
    }

    .content {
      width: 100%;
      /deep/img {
        margin: 20px 0;
        max-width: 100%;
      }
    }
    .function {
      .fn_comment {
        width: 100%;
        margin: 50px 0 30px;
        display: flex;
        justify-content: center;
        text-align: center;
        .comment,
        .share {
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 32px;
          color: orange;
          height: 55px;
          width: 90px;
          cursor: pointer;
        }
        .comment {
          margin-right: 5px;
        }
        .share {
          margin-left: 5px;
        }

        p {
          margin-top: 5px;
          font-size: 16px;
          color: #999999;
        }
      }
    }

    .comment {
      width: 100%;

      .reply {
        color: #909399;
        display: inline-block;
        margin-bottom: 10px;
        padding: 0 5px 0 10px;
        border: 1px solid rgba(64, 158, 255, 0.2);
        height: 32px;
        line-height: 30px;
        font-size: 12px;
        border-radius: 4px;
        background-color: #f4f4f5;

        div {
          margin-left: 5px;
          height: 16px;
          line-height: 16px;
          width: 16px;
          text-align: center;
          &:hover {
            border-radius: 8px;
            background-color: #909399;
            color: white;
          }
        }
      }

      h4 {
        font-weight: 400;
        font-size: 20px;
        margin-bottom: 20px;
      }
      /deep/.el-textarea {
        margin-bottom: 10px;
      }
      .comment_function {
        height: 112px;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;

        /deep/.el-upload--picture-card {
          width: 98px;
          height: 98px;
          line-height: 98px;
        }

        /deep/.el-upload-list__item-actions {
          width: 98px;
          height: 98px;
        }

        /deep/ .el-upload-list__item {
          width: 98px;
          height: 98px;
        }
      }
    }

    .commentBlock {
      width: 100%;
      border: 1px solid #dddddd;
      padding: 0 20px;
      padding-bottom: 5px;

      .box:last-child {
        border-bottom: none;
      }
    }

    .paging {
      margin: 10px auto;
    }
  }

  // 右边
  .right {
    width: 280px;

    h4 {
      font-size: 18px;
      font-weight: 400;
      height: 24px;
      padding-bottom: 10px;
      border-bottom: 1px solid #dddddd;
    }
  }
}
</style>